<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header {
            width: 1000px;
            height: 200px;
        }

        .box {
            height: 24px;
            width: 100%;
        }

        .good-result {
            width: 50%;
            background-color: green;
            float: left;
        }

        .down-result {
            width: 50%;
            background-color: red;
            float: left;
        }

        button {
            margin-top: 1rem;
             width: 45px;
            border-radius: 1rem;
            text-decoration: none;
            padding: 1rem 2rem;
            margin-bottom: 1rem;
            min-width: 10rem;
            text-align: center;
            border: 0;
            color: #fff;
            background-color: #009688;
            ;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>投票结果</h1>
    <div class="header">
        <div class="box">
            <div class="good-result">50%</div>
            <div class="down-result">50%</div>
        </div>
        <div class="button">
            <button type="button" class="layui-bth good-btn">赞成</button>
            <button type="button" class="layui-bth down-btn">反对</button>
        </div>
        <div>
            <p>赞成:<strong class="good-number">0</strong></p>
        </div>
        <div>
            <p>反对:<strong class="down-number">0</strong></p>
        </div>
    </div>

    <script>
        // 获取总进度条
        let goodResult = document.querySelector('.good-result');
        let downResult = document.querySelector('.down-result');

        // 获取总进度条的宽度
        let boxWidth = parseInt(getComputedStyle(document.querySelector('.box')).width);

        // 获取赞成以及反对人数
        let goodNumer = document.querySelector('.good-number');
        let downNumer = document.querySelector('.down-number');

        // 获取点击按钮
        let button = document.querySelector('.button');

        // 按钮点击事件触发
        button.addEventListener('click', e => {
            //点击后 赞成 后触发事件
            if (e.target.className == 'layui-bth good-btn') {
                goodNumer.innerHTML++
            }
            //点击后 反对 后触发事件
            if (e.target.className == 'layui-bth down-btn') {
                downNumer.innerHTML++
            }

            //获取按钮点击后赞成和反对人数的变量值
            let goodTemp = parseInt(goodNumer.innerHTML);
            console.log(goodTemp);
            let downTemp = parseInt(downNumer.innerHTML);
            console.log(downTemp);

            //计算投赞成票后百分比数字，并保留小数点后俩位
            goodResult.style.width = goodTemp / (goodTemp + downTemp) * boxWidth + 'px';
            goodResult.innerHTML = parseInt((goodTemp / (goodTemp + downTemp)) * 10000) / 100 + '%';

            //计算反对成票后百分比数字，并保留小数点后俩位
            downResult.style.width = downTemp / (goodTemp + downTemp) * boxWidth + 'px';
            downResult.innerHTML = parseInt((downTemp / (goodTemp + downTemp)) * 10000) / 100 + '%';
        })
    </script>
</body>

</html>